<script setup>
import { loginApi, sendCodeApi } from "@/api/user";
import router from "@/router";
import { useUserStore } from "@/stores/user";
import { Iphone, Lock } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref } from "vue";
const useStore = useUserStore();
const formRef = ref();
const loginInfo = ref({
  phone: "",
  code: "",
});
let buttonTxt = ref("获取验证码");
let timer = null;
// 点击获取验证码
const sendCode = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    try {
      await sendCodeApi({ phone: loginInfo.value.phone });
      ElMessage.success("获取成功,请注意查收");
      buttonTxt.value = "59s";
      let num = 59;
      timer = setInterval(() => {
        num--;
        if (num < 1) {
          buttonTxt.value = "重新获取验证码";
          clearInterval(timer);
          timer = null;
        } else {
          buttonTxt.value = num + "s";
        }
      }, 1000);
    } catch (e) {
      ElMessage.error(e.message);
    }
  });
};
// 点击登录
const handleLogin = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    if (!loginInfo.value.code || loginInfo.value.code === "") {
      ElMessage.warning("请输入验证码");
      return;
    }
    try {
      await useStore.loginAction(loginInfo.value);
      ElMessage.success("登录成功");
      router.push("/home");
    } catch (e) {
      ElMessage.error(e.message);
    }
  });
};
// 登录表单校验规则
const loginFormRules = {
  phone: [
    {
      required: true,
      message: "手机号不能为空",
      trigger: "blur",
    },
    {
      pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
};
</script>
  
<template>
  <div class="login-card">
    <div class="column">
      <h1>登陆</h1>
      <p>欢迎来到在线oj系统，请输入通过手机号登录！</p>
      <el-form
        ref="formRef"
        :model="loginInfo"
        size="large"
        :rules="loginFormRules"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="loginInfo.phone"
            placeholder="请输入手机号"
            :prefix-icon="Iphone"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input
            v-model="loginInfo.code"
            placeholder="请输入验证码"
            class="code"
            :prefix-icon="Lock"
          >
            <template #suffix>
              <el-button
                style="width: 130px"
                type="primary"
                @click="sendCode"
                :disabled="timer !== null"
                >{{ buttonTxt }}</el-button
              >
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 100%; margin-top: 20px"
            @click="handleLogin"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <p style="margin-top: 3rem; margin-bottom: 1.5rem">
            注册或登录即代表您同意<i>《用户协议》</i>和<i>《隐私协议》</i>
          </p>
        </el-form-item>
      </el-form>
    </div>
    <div class="column">
      <h2>在线oj系统欢迎您!</h2>
      <p>如您是新用户,系统默认在第一次登录进行注册</p>
    </div>
  </div>
</template>
  
<style>
.login-card {
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: 0 10px 50px -30px black;
  width: 1200px;
  border-radius: 30px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto;
  margin: 0 auto;
}
.login-card:after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: #010101;
  width: 60%;
  height: 100vh;
  clip-path: polygon(0 100%, 0 0, 100% 0, 70% 100%);
  z-index: -1;
}
.login-card a {
  text-decoration: none;
  color: #010101;
}
.login-card .column {
  padding: 4rem;
}
.login-card .column:last-child {
  background: url("../assets/images/oonn.jpg") center;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.login-card .column:last-child:after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, white, rgba(255, 255, 255, 0.1333333333));
  inset: 0;
}
.login-card .column:last-child * {
  z-index: 1;
}
.login-card .column:last-child a {
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
  border: 2px solid #010101;
  color: black;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3;
  font-weight: 600;
}
.login-card .column:last-child a:hover {
  background-color: #010101;
  color: white;
}
.login-card .column:last-child {
  text-align: center;
}
.login-card h1 {
  margin-bottom: 15px;
}
.login-card .form-element {
  width: 100%;
  border: none;
  background-color: white;
  padding: 20px 30px;
  font-size: 18px;
  border-radius: 50px;
  transition: box-shadow 0.2s;
  outline: none;
  box-shadow: 0 0 0 2px #010101;
}

.login-card input[type="checkbox"] {
  accent-color: #010101;
  width: 16px;
  height: 16px;
}
.login-card form {
  margin-top: 3rem;
}
.login-card form > * {
  margin-top: 1rem;
}
.login-card form .form-check-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: 5px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 992px) {
  .login-card {
    display: block;
    width: 500px;
    text-align: center;
  }
  .login-card .column:last-child {
    display: none;
  }
  .flex {
    flex-direction: column;
    gap: 1rem;
  }
  .social-buttons {
    justify-content: center;
  }
}
</style>